<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {useUserStore} from "@/stores/user.js";
import {useRouter} from "vue-router";
import {useLoginService,useRegisterService,useUpdatePasswordService} from "@/api/user.js";
import {User,Lock} from "@element-plus/icons-vue";
import {Phone,Location} from "@element-plus/icons-vue";
import {ElForm} from "element-plus";
import {getCartList} from "@/api/cart.js";
import {useCartStore} from "@/stores/cart.js";

const cartStore = useCartStore();
const userStore = useUserStore();
const router = useRouter();
const operation = ref("login");
const registerData = ref({
  username:"",
  password:"",
  rePassword:"",
  phone:"",
  address:""
})


const checkRePassword = (rule,value,callback)=>{
  if(value===''){
    callback(new Error('请再次确认密码！'));
  }else if(value !== registerData.value.password){
    callback(new Error("请确保两次密码一样"));
  }else{
    callback();
  }
}

const rules = {
  username:[{
    required:true,message:"请输入用户名",trigger:'blur'
  },{
    min:5,max:16,message:"长度为5~16位字符",trigger:'blur'
  }],
  password:[{
    required:true,message:"请输入密码",trigger:'blur'
  },{
    min:5,max:16,message:"长度为5~16位字符",trigger:'blur'
  }],
  rePassword:[{
    validator:checkRePassword,trigger:'blur'
  }],
  phone:[{
    required:true,message:"请输入手机号",trigger:'blur'
  },{
    pattern:/^\d{11}$/,message: "手机号必须为11位数字",trigger:'blur'
  }],
  address:[{
    required:true,message:"请输入收货地址",trigger:'blur'
  },{
    max:20,message:"请输入正确的收货地址",trigger:'blur'
  }]
}


const handleLogin =async()=> {
  //调用接口 完成登录
  let result = await useLoginService(registerData.value);
  userStore.setToken(result.data);
  ElMessage.success("恭喜，登录成功！");
  cartStore.cartList=(await getCartList()).data
  await router.push("/");
  
}

const clearData = ()=>{
  registerData.value = {
    username:"",
    password:"",
    rePassword:"",
    phone:"",
    address: ""
  }
}
const handleRegister= async()=>{
  let result = await useRegisterService(registerData.value);
  ElMessage.success("注册成功");
  router.push("/login");
}

const handleUpdatePassword = async()=>{
  let result = await useUpdatePasswordService(registerData.value);
  ElMessage.success("修改密码成功，请前往登录");
  router.push("/login");
}


</script>

<template>
<el-row class="login-page">
  <el-col :span="12" class="bg"></el-col>
  <el-col :span="6" :offset="3" class="form">
    <!-- 注册表单 -->
    <el-form ref="form" size="large" autocomplete="off" v-if="operation === 'register'" :model="registerData" :rules="rules">
      <el-form-item>
        <h1>注册</h1>
      </el-form-item>
      <el-form-item prop="username">
        <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
      </el-form-item>
      <el-form-item prop="rePassword">
        <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input :prefix-icon="Phone" type="text" placeholder="请输入手机号" v-model="registerData.phone"></el-input>
      </el-form-item>
      <el-form-item prop="address">
        <el-input :prefix-icon="Location" type="text" placeholder="请输入收货地址" v-model="registerData.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="button" type="primary" auto-insert-space @click="handleRegister">
          注册
        </el-button>
      </el-form-item>
      <el-form-item class="flex">
        <el-link type="info" :underline="false" @click="operation='login';clearData()">
          ← 返回
        </el-link>
      </el-form-item>
    </el-form>
    
    <!-- 登录表单 -->
    <el-form ref="form" size="large" autocomplete="off" v-if="operation === 'login'" :model="registerData" :rules="rules">
      <el-form-item>
        <h1>登录</h1>
      </el-form-item>
      <el-form-item prop="username">
        <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
      </el-form-item>
      <el-form-item class="flex">
      </el-form-item>
      <el-form-item>
        <el-button class="button" type="primary" auto-insert-space @click="handleLogin">登录</el-button>
      </el-form-item>
      <el-form-item class="flex">
        <el-link type="info" :underline="false" @click="operation='register';clearData()">
          注册 →
        </el-link>
      </el-form-item>
      <el-form-item class="flex">
        <el-link type="info" :underline="false" @click="operation='updatePwd';clearData()">
          忘记密码 →
        </el-link>
      </el-form-item>
    </el-form>
    
    <!-- 修改密码表单 -->
    <el-form ref="form" size="large" autocomplete="off" v-if="operation === 'updatePwd'" :model="registerData" :rules="rules">
      <el-form-item>
        <h1>修改密码</h1>
      </el-form-item>
      <el-form-item prop="username">
        <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input :prefix-icon="Phone" type="text" placeholder="请输入手机号" v-model="registerData.phone"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input :prefix-icon="Lock" type="password" placeholder="请输入新密码" v-model="registerData.password"></el-input>
      </el-form-item>
      <el-form-item prop="rePassword">
        <el-input :prefix-icon="Lock" type="password" placeholder="请再次确认新密码" v-model="registerData.rePassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="button" type="primary" auto-insert-space @click="handleUpdatePassword">
          修改密码
        </el-button>
      </el-form-item>
      <el-form-item class="flex">
        <el-link type="info" :underline="false" @click="operation='login';clearData()">
          ← 返回
        </el-link>
      </el-form-item>
    </el-form>
  </el-col>
</el-row>
</template>

<style  scoped>
/* 样式 */
.login-page {
  height: 100vh;
  background-color: #fff;
  
  .bg {
    background: url('@/assets/bg2.jpg') no-repeat 60% center / 240px auto,
    url('@/assets/bg1.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }
  
  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    user-select: none;
    
    .title {
      margin: 0 auto;
    }
    
    .button {
      width: 100%;
    }
    
    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
